import { Input, Table, Space, Popconfirm } from "antd";
import axios from "axios";
import { useEffect, useState } from "react";
import "./todo.css";
const { Search } = Input;

function todo() {
  const onSearch = async(value) => {
    // console.log(value);  // `http://localhost:3000/data/?q=${value}`;
    const res = await axios.get(`http://localhost:3000/data/?q=${value}`)
    console.log(res.data);
    
  };

  const columns = [
    {
      title: "任务编号",
      dataIndex: "id",
      key: "id",
    },
    {
      title: "任务名称",
      dataIndex: "name",
      key: "name",
    },
    {
      title: "任务描述",
      dataIndex: "des",
      key: "des",
    },
    {
      title: "操作",
      dataIndex: "do",
      key: "do",
      render: (text, record) => (
        <Space size='middle'>
            <Popconfirm title="确定删除吗？" onConfirm={() => {
                axios.delete(`http://localhost:3000/data/${record.id}`);
                setList(list.filter((item) => item.id!== record.id));
            }}>
                <a href="#">删除</a>
            </Popconfirm>
        </Space>
      )
    },
  ];

  
  useEffect(() => {
    async function getList() {
        const res =await axios.get('http://localhost:3000/data')
        // console.log(res.data);
        return res.data;
    }
    getList().then((list) => {
        setList(list);
    });
    
  
  }, []);



  
  const [list, setList] = useState([]);

  return (
    <div className="container">
      <div className="search-box">
        <Search
          placeholder="请输入关键词"
          onSearch={onSearch}
          allowClear
          size="large"
          enterButton="搜索"
        />
      </div>

      <Table
        bordered
        columns={columns}
        dataSource={list}
        pagination={false}
        rowKey = {(item) => item.id}
      ></Table>
    </div>
  );
}
export default todo;
